<template>
	<div id="index">
		<!-- 顶部导航 -->
		<TopNav @goPage="goPage"></TopNav>
		<router-view></router-view>
	</div>
  </template>
  
  <script>
  import TopNav from '@/components/TopNav.vue';
  export default {
	  name:'index',
	  data(){
		return {}
	  },
	  components:{
		TopNav
	  },
	  methods:{
	  goPage(_path){
		if(_path){
				  this.$router.push({
					  path:_path
				  })
			  }
	  }
	}
  }
  </script>
  
<style lang="less">
	#index{
		width:100%;
		height:100%;        
        overflow: hidden;
	}
	#map{
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0px;
		left: 0px;
	
	}
	.left_content,.right_content{
		position: absolute;
		top:112px;
			.panel_wrap{
				.panel_title {
					.title_text {
						display: inline-block;
						width: 100%;
						height: 32px;
					}
				}
			}
	}
	.left_content {
		// left: 18px;
		width: 375px;
		height: calc(100% - 120px);
		// background-color: rgba(149, 164, 171, 0.1);
		background: linear-gradient(to left,transparent 5%,#000 90%);
		overflow-y: auto;
		// padding: 0 10px;
		// overflow-x: hidden;
		padding: 0 10px 0 18px;
		backdrop-filter: blur(4px);
	}
	.right_content{			
		right: 0px;
		width: 435px;
		height: calc(100% - 120px);
		// background-color: rgba(149, 164, 171, 0.1);
		background: linear-gradient(to right,transparent 5%,#000 90%);
		overflow-y: auto;
		// padding: 0 10px;
		// overflow-x: hidden;
		padding: 0 18px 0 10px;
		backdrop-filter: blur(4px);
	}
	/*滚动条整体样式,高宽分别对应横竖滚动条的尺寸*/
	div::-webkit-scrollbar{
		width: 8px;
		height: 2px;
		scrollbar-arrow-color: rgba(17 81 114, 1);
	}
	/*滚动条里面小方块*/
	div::-webkit-scrollbar-thumb{
		border-radius: 15px;
		-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
		background: rgba(0,0,0,0.2);
		scrollbar-arrow-color:rgba(17 81 114, 1);
	}
	/*滚动条里面轨道*/
	div::-webkit-scrollbar-track{
		-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
		border-radius: 0;
		background: rgba(0,0,0,0.1);
	}

	.bottom_panel{
		position: absolute;
		width: 100%;
		height:58px ;
		bottom: 0;
		left: auto;
		background: url('../assets/image/Vector@1x.png') no-repeat;
		background-position: 50% 50%;
	}
	.bar_right,.bar_right_small{
		position: absolute;
		top:205px;
		right: 503px;
		background: rgba(149, 164, 171, 0.1);
		backdrop-filter: blur(4px);
		border-radius: 2px;
		border-width:1px;
		border-style: solid;
		border-image: linear-gradient(rgba(181, 188, 190, 0.4), rgba(181, 188, 190, 0)) 20 20;
	}
	.my_table{
		width:100%;
		height:100%;
		.list_title,.list_row{
			display: flex;
			justify-items: sp;
			width: 100%;
			justify-content: space-between;	
			margin-bottom: 8px;	
			padding: 0 5px;
			box-sizing: border-box;					
		}	
		.list_row{
			background: linear-gradient(360deg, rgba(191, 191, 191, 0.15) 0%, rgba(191, 191, 191, 0) 114.77%);					
			padding: 0 5px;
		}
		.list_title{
			background: linear-gradient(180deg, rgba(174, 186, 192, 0) -95.24%, rgba(178, 186, 190, 0.11) 126.19%);
		}
		.title_item,.td_item{
			height: 44px;
			line-height: 44px;
			text-align: center;
			width: 50px;
		}
		.title_item{
			color: #FFFFFF;
			font-size: 14px;
		}
		.td_item{
			color: rgba(255,255,255,0.6);
			font-size: 12px;
		}						
		.list_row:hover{
			background: url('../assets/image/table_opt/bg_row.png') no-repeat;
			background-size: 100% 100%;
			.td_item{
				color:#FFFFFF;
			}
		}
	}

	.time_player{
		position:absolute;
		width: 438px;
		height: 58px;
		// top: 1002px;
		bottom: 45px;
		left: 428px;		
	}
	.pressureLegend{
		position: absolute;
		left: 425px;
		bottom: 142px;
		width: 100px;
		height: 132px;
		display: flex;
		flex-direction: row;
		.legend{
			width: 15px;
			height: 132px;
			background: rgba(149, 164, 171, 0.1);
			backdrop-filter: blur(4px);
			border-radius: 2px;
			border: 1px solid #ccc;
			// border-image: linear-gradient(180deg, rgba(181, 188, 190, 0.4) 0%, rgba(181, 188, 190, 0) 100%);
			border-image: linear-gradient(rgba(181, 188, 190, 0.4), rgba(181, 188, 190, 0)) 20 20;
			.content{
				width: 5px;
				height: 122px;
				margin: auto;
				margin-top: 5px;				
				background: linear-gradient(0deg, #12EBF2 0%, #14C111 22.92%, #0F5CF0 74.48%, #F08B15 97.92%);
			}
		}
		.marker{
			width: 70px;
			font-size: 12px;
			line-height: 18px;
			color: rgba(255, 255, 255, 0.6);
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			padding-left: 5px;
		}
	}
	.line{
		width:100%;
		height:1px;
		background-color: rgba(255, 255, 255, .3)
	}
</style>
  
<style lang="less">
.el-date-editor{
		width: 100% !important;
		height:24px;

		// input::placeholder{
		// 	color:#FFFFFF;
		// }
		.el-input__inner{
			// height: 24px;
			padding-left: 10px;
			background: rgba(149, 164, 171, 0.1);
			border: 1px solid rgba(255,255,255,0.2);
			backdrop-filter: blur(4px);
			border-radius: 2px;
			color:#FFFFFF;
		}
		.el-input__prefix{
			right: 0px;
			text-align: right;
			.el-input__icon{
				line-height: 26px;
			}
		}
		.el-input__prefix{
			display: none;
		}
		.el-input__icon{
			display: inline-block;
			width: 13px;
			height: 7px;
			background: url('~@/assets/image/Vector 392.png') no-repeat;
			background-size: 100% 100%;
			background-position: 0px 0px;
			// border: 1px solid red;
			margin-top: 6px;
			vertical-align: middle;
		}
		.el-input__icon::before{
			content: '';
		}
		.el-input__suffix-inner{
			display: inline-block;
			height: 100%;
		}	
	}

</style>
<style lang="less">
    /deep/.el-pagination{
            position:relative;
            height: 80px;
            padding-top: 20px;
            text-align: center;
        }

</style>